<template>
  <el-card class="box-card" shadow="never">
    <div slot="header" class="clearfix">
      <span>个人详情</span>
    </div>
    <el-form :inline="true" :model="userInfo" class="form-inline">
      <el-form-item label="头像:">
        <el-card v-loading="showLoading"
                 element-loading-text="正在上传..."
                 shadow="never">
          <el-upload
              :action="upload_avatar_action"
              :headers="upload_avatar_headers"
              name="avatar"
              class="avatar-uploader"
              :show-file-list="false"
              :on-error="onAvatorUploadError"
              :on-progress="onAvatorUploading"
              :on-success="onAvatorUploadSuccess"
              accept=".jpg,.jpeg,.png,gif,JPG,JPEG,PNG,GIF"
          >
            <el-avatar v-if="userInfo" :src="userAvatar" class="avatar"></el-avatar>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-card>
      </el-form-item>
    </el-form>
    <el-form v-if="userInfo" :inline="true" :model="userInfo" class="form-inline">
      <el-form-item label="昵称:">
        <el-input size="small" v-model="userInfo.name" placeholder="昵称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small"
                   :loading="showLoading"
                   type="primary"
                   @click="onModifyNameClick">修改
        </el-button>
      </el-form-item>
    </el-form>
    <el-form v-if="userInfo" :inline="true" :model="userInfo" class="form-inline">
      <el-form-item label="邮箱:">
        <el-input size="small" disabled v-model="userInfo.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" disabled type="primary">修改</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import {Cons}      from '../../Constant'
import {fetchPost} from '../../libs/axiosService'

export default {
  name: 'detail',
  data() {
    return {
      showLoading: false,
      upload_avatar_action: Cons.BASE_URL + '/api/user/modify_avatar',
      upload_avatar_headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')},
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo
    },
    userAvatar() {
      if (this.userInfo) {
        return Cons.BASE_URL + '/storage/' + this.userInfo.avatar
      }
      else {
        return ''
      }
    }
  },
  methods: {
    onModifyNameClick() {
      if (this.userInfo.name) {
        this.showLoading = true
        fetchPost('/api/user/modify_name', {
          name: this.userInfo.name
        })
            .then(res => {
              this.showLocalNotification('修改成功！')
              // 修改成功,通知刷新页面
              //localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
              this.$store.dispatch('user/setUserInfo', this.userInfo)
              this.$events.emit('USER_INFO_UPDATE', '')
            })
            .finally(() => {
              this.showLoading = false
            })
      }
    },
    onAvatorUploadSuccess(res) {
      this.showLoading = false
      //this.userInfo.avatar = res.data.avatar
      //localStorage.setItem('userInfo', JSON.stringify(res.data))
      this.$store.dispatch('user/setUserInfo', res.data)
      this.$events.emit('USER_INFO_UPDATE', '')
    },
    onAvatorUploading() {
      this.showLoading = true
    },
    onAvatorUploadError() {
      this.showLoading = false
      this.$message.error({
        message: '上传失败',
        offset: 100
      })
    },
  }
}
</script>
<style scoped lang="scss">
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}

.avatar {
  width: 128px;
  height: 128px;
  display: block;
}
</style>